<template>
    <div>
        <el-button type="primary" size="small" style="margin-bottom: 10px" @click="toSave">保存</el-button><el-button type="primary" size="small" style="margin-bottom: 10px" @click="selectAll">全选</el-button><el-button type="primary" size="small" style="margin-bottom: 10px" @click="clearAll">清空</el-button>
        <el-container>
            <el-aside width="200px"><role-list v-bind="$attrs"></role-list></el-aside>
            <el-main><menu-tree ref="menu-tree" v-bind="$attrs"></menu-tree></el-main>
        </el-container>
    </div>
</template>
<script>
    import RoleList from "./components/roleList";
    import MenuTree from "./components/menuTree";
    export default {
        name:"TabContainer",
        components: {MenuTree, RoleList},
        data() {
            return {
                num: 1,
            };
        },
        created() {
        },
        methods: {
            handleChange(value) {
            },
            toSave(){
                this.$refs["menu-tree"].save()
            },
            selectAll(){
                this.$refs["menu-tree"].selectAll()
            },
            clearAll(){
                this.$refs["menu-tree"].clearAll()
            }
        }
    };
</script>
<style lang="scss" scoped>
    .el-main{
        padding: 0px 20px;
    }
    .el-aside{
        padding: 0px;
    }
</style>
